<!-- 复选框自定义 -->
<template>
  <div>
    <el-checkbox-group
      v-model="checkedUserList"
      @change="handleCheckedUserChange"
    >
      <el-checkbox
        class="user_item"
        v-for="user in userList"
        :key="user.code"
        :disabled="isDisabled(user)"
        :label="JSON.stringify(user)"
      >
        <chat-avatar
          :size="28"
          :content="user.avatar ? user.avatar : user.name"
        ></chat-avatar>
        <span>{{ user.name }}({{ user.code }})</span>
      </el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex"
import chatAvatar from "./avatar.vue"
export default {
  components: { chatAvatar },
  model: {
    prop: "checkData",
    event: "change"
  },
  props: {
    checkData: {
      type: Array,
      default: () => {
        return []
      }
    },
    userList: {
      type: Array,
      default: () => {
        return []
      }
    },
    operateType: {
      type: String,
      default: "create"
    }
  },
  computed: {
    ...mapGetters(["currentGroupMemberList"])
  },
  data() {
    return {
      checkedUserList: []
    }
  },

  mounted() {
    this.checkedUserList = this.checkData.map((item) => JSON.stringify(item))
  },

  methods: {
    handleCheckedUserChange(data) {
      const res = data.map((item) => JSON.parse(item))
      this.$emit("change", res)
    },
    isDisabled(user) {
      return (
        user.id == this.$store.state.userInfo.userId ||
        (this.operateType === "add" &&
          this.currentGroupMemberList.some((item) => item.id == user.id))
      )
    }
  },
  watch: {
    checkData: {
      handler(val) {
        this.checkedUserList = val.map((item) => JSON.stringify(item))
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/.el-checkbox__label {
  display: flex;
  align-items: center;
  > span {
    padding-left: 10px;
  }
}
.user_item {
  display: flex;
  align-items: center;
  padding: 10px;
}
</style>
